
function draw_stackedbar(){
    var svg = d3.select('#stacked')
    d3.csv('data/csv/HR_comma_sep.csv').then(d=>{
        svg.selectAll('*').remove()
        //console.log(d)
        d.forEach(d=>{
            d['satisfaction_level']= +(d['satisfaction_level'])
            d['last_evaluation']= +(d['last_evaluation'])
            d['average_montly_hours']= +(d['average_montly_hours'])
            d['time_spend_company']= +(d['time_spend_company'])
            d['Work_accident']= +(d['Work_accident'])
            d['promotion_last_5years']= +(d['promotion_last_5years'])
            d['left']= +(d['left'])
            d['number_project']= +(d['number_project'])
        })

        let data1 = {
            '2':{
                'left':0,
                'noleft':0,
                'sum':0,
            },
            '3':{
                'left':0,
                'noleft':0,
                'sum':0,
            },
            '4':{
                'left':0,
                'noleft':0,
                'sum':0,
            },
            '5':{
                'left':0,
                'noleft':0,
                'sum':0,
            },
            '6':{
                'left':0,
                'noleft':0,
                'sum':0,
            },
            '7':{
                'left':0,
                'noleft':0,
                'sum':0,
            },
        }
        let data2 = {
            'high':{
                'left':0,
                'noleft':0,
                'sum':0,
            },'mid':{
                'left':0,
                'noleft':0,
                'sum':0,
            },'low':{
                'left':0,
                'noleft':0,
                'sum':0,
            },
        }   
        let seldata = []

        if(tableData.length==0){
            for(let i=0;i<d.length;i++){
                if(d[i]['satisfaction_level']>=minSatis&&d[i]['satisfaction_level']<=maxSatis){
                    if(d[i]['last_evaluation']>=minEvalu&&d[i]['last_evaluation']<=maxEvalu){
                        seldata.push(d[i])
                    }
                }
            }
            //console.log(seldata);
            
        }else{
            for(let i=0;i<tableData.length;i++){
                seldata.push(d[tableData[i]])
            }
            
        }

        let n=seldata.length;
        //console.log(n)  
        for(let i=n-1;i>=0;i--){
            if(seldata[i]['Work_accident']==(1-waccident)||seldata[i]['promotion_last_5years']==(1-promotion)){
                seldata.splice(i,1)
            }
        }
        //console.log(seldata)

        for(let i=0;i<seldata.length;i++){
            let projectnum=seldata[i]['number_project']
            if(seldata[i]['left']==1){
                data1[projectnum]['left']++;
                data1[projectnum]['sum']++;
            }else{
                data1[projectnum]['noleft']++;
                data1[projectnum]['sum']++
            }         
        }
        //console.log(data1);

        for(let i=0;i<seldata.length;i++){
            let salary=seldata[i]['salary']
            if(salary=='medium'){
                salary='mid'
            }  
            if(seldata[i]['left']==1){
                data2[salary]['left']++;
                data2[salary]['sum']++;
            }else{
                data2[salary]['noleft']++;
                data2[salary]['sum']++;
            }      
        }
        //console.log(data2);


        var conf = {
            width:300,
            height:270,
            margain:{
                top:30,
                bottom:25,
                left:30,          
                right:20,
            }
        }
        var innerWidth = conf.width-conf.margain.left-conf.margain.right;
        var innerHeight = conf.height-conf.margain.top-conf.margain.bottom;
        svg.attr('height',conf.height).attr('width',conf.width)

        var tooltip1 = d3.select('#tooltip1')
        var g=svg.append('g').attr('transform',`translate(${conf.margain.left},${conf.margain.top})`)
        
        if(judgenum==1){
            // console.log(data1);
            let k = Object.keys(data1)
            // console.log(k)
            const yScale = d3.scaleBand()
            .domain(k)
            .range([0,innerHeight])
            .padding(0.4)

            const xScale = d3.scaleLinear()
            .domain([0,1])
            .range([0,innerWidth])
            
            const yAxis = d3.axisLeft(yScale)
            g.append('g').call(yAxis).attr('color','#98F5FF')

            const xAxis = d3.axisBottom(xScale)
            g.append('g').call(xAxis).attr('color','#98F5FF')
            .attr('transform',`translate(${0},${innerHeight})`)

            for(let i=0;i<k.length;i++){
                g.append('rect')
                .attr('x',1)
                .attr('y',yScale(k[i]))
                .attr('height',yScale.bandwidth())
                .attr('width', 0)
                .attr('fill', Color[1])
                .attr('stroke','black')
                .attr('stroke-width',0.5)
                .on('mousemove',function(){
                    let x = window.event.clientX-80;
                    let y = window.event.clientY+10;
                    tooltip1.html('离职'+'<br/>'+(data1[k[i]].left/data1[k[i]].sum*100).toFixed(2)+'%'+'<br/>'+data1[k[i]].left+'人')
                    .style('position','absolute')
                    .style('left',x+'px')
                    .style('top',y+'px')
                    .style('color','white')
                    .style('font-size','18px')
                    .style('caret-color','transparent')
                    .style('background','grey')

                    d3.select(this)
                    .attr('opacity',0.6)
                    .attr('stroke','white')
                    .attr('stroke-width',3)
                })
                .on('mouseout',function(){
                    tooltip1.html("")
                    d3.select(this)
                    .attr('opacity',1)
                    .attr('stroke','black')
                    .attr('stroke-width',0.5)
                    .attr('background','none')
                })
                .transition()
                .duration( 2000 )
                .attr('width', xScale(data1[k[i]].left/data1[k[i]].sum))

                g.append('rect')
                .attr('x', xScale(data1[k[i]].left/data1[k[i]].sum) + xScale(data1[k[i]].noleft/data1[k[i]].sum) )
                .attr('y',yScale(k[i]))
                .attr('height',yScale.bandwidth())
                .attr('width', 0)
                .attr('fill', Color[0])
                .attr('stroke','black')
                .attr('stroke-width',0.5)
                .on('mousemove',function(){
                    let x = window.event.clientX-80;
                    let y = window.event.clientY+10;
                    tooltip1.html('未离职'+'<br/>'+(data1[k[i]].noleft/data1[k[i]].sum*100).toFixed(2)+'%'+'<br/>'+data1[k[i]].noleft+'人')
                    .style('position','absolute')
                    .style('left',x+'px')
                    .style('top',y+'px')
                    .style('color','white')
                    .style('font-size','18px')
                    .style('caret-color','transparent')
                    .attr('background','grey')

                    d3.select(this)
                    .attr('opacity',0.6)
                    .attr('stroke','white')
                    .attr('stroke-width',3)
                    .attr('background','none')
                })
                .on('mouseout',function(){
                    tooltip1.html("")
                    d3.select(this)
                    .attr('opacity',1)
                    .attr('stroke','black')
                    .attr('stroke-width',0.5)
                })
                .transition('right')
                .duration( 2000 )
                .attr('x', xScale(data1[k[i]].left/data1[k[i]].sum))
                .attr('width', xScale(data1[k[i]].noleft/data1[k[i]].sum))
            }

        }else if(judgenum==2){

            let k = Object.keys(data2)
            //console.log(data2);

            const yScale = d3.scaleBand()
            .domain(['high','mid','low'])
            .range([0,innerHeight])
            .padding(0.5)

            const xScale = d3.scaleLinear()
            .domain([0,1])
            .range([0,innerWidth])

            const yAxis = d3.axisLeft(yScale)
            g.append('g').call(yAxis).attr('color','#98F5FF')

            const xAxis = d3.axisBottom(xScale)
            g.append('g').call(xAxis).attr('color','#98F5FF')
            .attr('transform',`translate(${0},${innerHeight})`)
            
            for(let i=0;i<k.length;i++){
                g.append('rect')
                .attr('x',1)
                .attr('y',yScale(k[i]))
                .attr('height',yScale.bandwidth())
                .attr('width', 0)
                .attr('fill', Color[1])
                .attr('stroke','black')
                .attr('stroke-width',0.5)
                .on('mousemove',function(){
                    let x = window.event.clientX+10;
                    let y = window.event.clientY+10;
                    tooltip1.html('离职'+'<br/>'+(data2[k[i]].left/data2[k[i]].sum*100).toFixed(2)+'%'+'<br/>'+data2[k[i]].left+'人')
                    .style('position','absolute')
                    .style('left',x+'px')
                    .style('top',y+'px')
                    .style('color','white')
                    .style('font-size','18px')
                    .style('caret-color','transparent')

                    d3.select(this)
                    .attr('opacity',0.6)
                    .attr('stroke','white')
                    .attr('stroke-width',3)
                })
                .on('mouseout',function(){
                    tooltip1.html("")
                    d3.select(this)
                    .attr('opacity',1)
                    .attr('stroke','black')
                    .attr('stroke-width',0.5)
                })
                .transition()
                .duration( 2000 )
                .attr('width',xScale(data2[k[i]].left/data2[k[i]].sum))

                g.append('rect')
                .attr('x', xScale(data2[k[i]].left/data2[k[i]].sum) + xScale(data2[k[i]].noleft/data2[k[i]].sum) )
                .attr('y',yScale(k[i]))
                .attr('height',yScale.bandwidth())
                .attr('width', 0)
                .attr('fill', Color[0])
                .attr('stroke','black')
                .attr('stroke-width',0.5)
                .on('mousemove',function(){
                    let x = window.event.clientX+10;
                    let y = window.event.clientY+10;
                    tooltip1.html('未离职'+'<br/>'+(data2[k[i]].noleft/data2[k[i]].sum*100).toFixed(2)+'%'+'<br/>'+data2[k[i]].noleft+'人')
                    .style('position','absolute')
                    .style('left',x+'px')
                    .style('top',y+'px')
                    .style('color','white')
                    .style('font-size','18px')
                    .style('caret-color','transparent')

                    d3.select(this)
                    .attr('opacity',0.6)
                    .attr('stroke','white')
                    .attr('stroke-width',3)
                })
                .on('mouseout',function(){
                    tooltip1.html("")
                    d3.select(this)
                    .attr('opacity',1)
                    .attr('stroke','black')
                    .attr('stroke-width',0.5)
                })
                .transition('right')
                .duration( 2000 )
                .attr('x', xScale(data2[k[i]].left/data2[k[i]].sum) )
                .attr('width',xScale(data2[k[i]].noleft/data2[k[i]].sum) )
            }
        }

        //构造图例所需数组
        var data_legend=[
            {'name':'离职人员', 'color': Color[1]},
            {'name':'未离职人员', 'color': Color[0]}
        ]
        
        //图例
        var legend=svg.append('g').attr('id','legend')
        
        legend.selectAll('.legend')
        .data(data_legend)
        .join('g').attr('class','legend')
        .attr('transform',(d,i)=>`translate(${innerWidth},${i*18+10})`)

        //绘制文字
        legend.selectAll('.legend')
        .append('text')
        .text(d=>d.name)
        .attr('fill','white')
        .attr('text-anchor','end')
        .attr('font-size','11')
        
        //绘制颜色块
        legend.selectAll('.legend')
        .append('rect')
        .attr('height',10)
        .attr('width',20)
        .attr('fill',d=>d.color)
        .attr('x',8)
        .attr('y',-8)

        // 画表头
        // svg.append('text')
        // .text('职工离职/未离职比例层叠柱状图')
        // .attr('transform','translate(65,20)')
        // .attr('fill','#98F5FF')
        // .attr( "font-weight", "bold" )
    })

}